<!-- 闪电实况 -->
<!-- 初步完结2024-10-8 -->
<template>
    <div class="container">
        <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
            <span style="margin-right: 20px; font-weight: bold;">天气实况监测</span>
            <span style="margin-right: 20px;">|</span>
            <span style="display: flex; align-items: center;">
                <span>闪电实况</span>
            </span>
        </div>
        <div class="content">
            <img :src="imgUrl" alt="">
        </div>
    </div>
</template>

<script>
import { reqLightingPic } from '@/api/monitor/index.js'
export default {
    name: "lightning_live",
    data() {
        return {
            imgUrl: '',
            collectTime: '',
            title: ''
        }
    },
    mounted() {
        this.getLightingPic()
    },
    methods: {
        // 获取图片
        async getLightingPic() {
            let res = await reqLightingPic()
            if (res.data.code === 200) {
                this.imgUrl = res.data.data.minioUrl
                this.collectTime = res.data.data.updateTime
                this.title = res.data.data.lightingName
            }
            else {
                this.$message.error(res.data.msg)
            }


        }
    },
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;

    .content {
        width: 100%;
        height: 95%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 90%;
            height: 800px;
        }

    }
}
</style>